<template>
  <div>
    <!-- 头部标签 -->
    <van-nav-bar fixed>
      <template #left>
        <img src="../../assets/logo.png" alt="" class="logo" />
      </template>
      <template #right>
        <!-- 放大镜的图标 -->
        <van-icon
          name="search"
          size="0.48rem"
          color="pink"
          @click="$router.push({ path: '/search' })"
        />
      </template>
    </van-nav-bar>
    <!-- tab导航栏 -->
    <div class="main">
      <!-- 导航栏右边的加号 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="xianshi"
      />
      <van-tabs
        v-model="active"
        sticky
        offset-top="1.226667rem"
        @click="pindaoId"
      >
        <!-- 每次循环独立执行，这段代码会产生多个 -->
        <van-tab
          :title="item.name"
          v-for="item in channelList"
          :key="item.id"
          :name="item.id"
        >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- 把articleList传给子组件ArticleList，让其循环这个数组 -->
            <van-list
              offset="10"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <ArticleList :arr="articleList" @bgxqFn="bgxqFn"></ArticleList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 点击加号出现的页面内容 -->

    <van-popup v-model="show" @close="$refs.edit.show = false">
      <div class="popup-container">
        <div class="pop-body">
          <ChannelEdit
            @colsePop="guan"
            :userChannelList="channelList"
            ref="edit"
            @tiaozhuan="tiaozhuan"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import ArticleList from './ArticleList' // 引入ArticleList组件
import ChannelEdit from './ChannelEdit' // 引入ChannelEdit组件
// 引入 自己写的时间显示插件
import { gettime } from '@/utils/date'
import { MyNotify } from '@/utils/MyNotify.js'// 引入自己写的弹窗功能
import {
  channelAPI,
  articlesListAPI,
  articleDislikeApi,
  articleReportsApi
} from '@/api'
// 下面这三行再时间插件里封装了，和下面的函数一起
// import dayjs from 'dayjs' // 引入时间插件
// import relativeTime from 'dayjs/plugin/relativeTime'
// import 'dayjs/locale/zh-cn' // 转中文
const cacheObj = {} // 存放缓存数据的大对象
export default {
  data () {
    return {
      active: 0, // 导航栏的固定下标
      channelList: [], // 频道数据,用来渲染navbar的
      articleList: [], // 文章数据
      channel_id: 0, // 默认频道id 作为调用articlesListAPI传入的实参
      loading: false, // 上拉加载参数
      finished: false, // 上拉加载参数
      nextTime: null, // 实现拉下刷新要传入的参数，默认为空，就会显示第一页的数据
      isLoading: false, // 下拉刷新的参数
      show: false
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  async created () {
    const res = await channelAPI() // 页面打开获取频道数据
    console.log(res)
    this.channelList = res.data.data.channels
    // this.fn()
    this.getARrticleList() // 调用获取文章列表的方法
  },
  methods: {
    gettime: gettime, // 把时间插件注册进来
    // async fn () {
    //   const res = await channelAPI()
    //   console.log(res)
    //   this.channelList = res.data.data.channels
    // }
    // 获取时间（几年前之类的）
    async getARrticleList () {
      if (cacheObj[this.channel_id]?.arr && this.loading === false) { // ?.可选链操作符
        // 从变量缓存里取值
        this.articleList = cacheObj[this.channel_id].arr
        this.nextTime = cacheObj[this.channel_id]?.nextTime // ?.可选链操作符
        this.$nextTick(() => {
          window.scrollTo(0, cacheObj[this.channel_id].scrolltop)
        })
      } else {
        const res2 = await articlesListAPI({
          channel_id: this.channel_id,
          pre_timestamp: this.nextTime
        })
        console.log(res2)
        // 把结果赋值给文章数据,扩展运算符做数组拼接，下拉刷新页面要显示之前的数据
        this.articleList = [...this.articleList, ...res2.data.data.results]
        // 把文章数组赋值给大对象
        cacheObj[this.channel_id] = {} // 先让cacheObj[this.channel_id] 存在，不然下面这句代码.arr前面的部分是undefined
        cacheObj[this.channel_id].arr = this.articleList // 把数组存到缓存里

        // 把上次获得的pre_timestamp属性重新赋值给data里的pre_timestamp变量
        // 为了下拉刷新得到的数据，因为后台接口要求传入的pre_timestamp这个参数
        this.nextTime = res2.data.data.pre_timestamp
        cacheObj[this.channel_id].nextTime = res2.data.data.pre_timestamp // 在缓存里再存一份
        // 预处理，把数据中的pubdate重新赋值，方便item组件插值表达式的表示
        res2.data.data.results.forEach((item) => {
          item.pubdate = this.gettime(item.pubdate)
        })
        // 加载完毕后把loading改为flase list组件这么要求的
        this.loading = false
        // 把下拉刷新完成后v-model的值改为false
        this.isLoading = false
      }
    },
    // 下面这些内容封装起来了
    // gettime (targetTime) {
    //   // 时间插件
    //   dayjs.extend(relativeTime)
    //   dayjs.locale('zh-cn') // use locale
    //   var a = dayjs()
    //   var b = dayjs(targetTime)
    //   return a.to(b) // in 2 years
    // },

    pindaoId (nameid, title) {
      // 切换频道功能
      // console.log(name, title)
      cacheObj[this.channel_id].scrolltop = window.scrollY // 把切换之前的频道页面高度记录下来
      console.log(cacheObj[this.channel_id].scrolltop)
      this.channel_id = nameid // id是van-tab身上绑定的name所对应的值，这个name(改成了nameid，一个东西)默认对应的是频道id
      this.articleList = [] // 因为getARrticleList()方法内部做了数组拼接，所以切换页面时先把数据滞空，否则会显示连带上个频道的数据也渲染出来了
      this.nextTime = null // 把时间戳改为空，目的是为了切换频道后也是显示的当前频道第一页的内容
      this.getARrticleList() // 切换后继续调用获取文章数据的方法
    },
    // 底部加载大的方法
    onLoad () {
      // 因为数据请求是异步的，所以打开页面页面告诉为0，list组件会以为已经触底了，所以会执行onload方法，和created里的请求重复了导致报错ID重复，所以做个判断，若开始数组为空，不执行这个代码
      if (this.articleList.length === 0) {
        return
      }
      this.getARrticleList()
    },
    // 下拉刷新的函数
    onRefresh () {
      setTimeout(() => {
        cacheObj[this.channel_id].arr = null // 先把缓存清空
        cacheObj[this.channel_id].nextTime = null // 先把缓存清空
        this.articleList = [] // 因为getARrticleList()方法内部做了数组拼接，所以切换页面时先把数据滞空，否则会显示连带上个频道的数据也渲染出来了
        this.nextTime = null // 把时间戳改为空，目的是为了切换频道后也是显示的当前频道第一页的内容
        this.getARrticleList() // 切换后继续调用获取文章数据的方法
      }, 500)
    },
    async bgxqFn (artId, action) {
      // 循环如果获取数据里的art_id与传过来的id相同 获取数据里对应元素的下标
      const index = this.articleList.findIndex((item) => {
        return item.art_id === artId
      })
      if (index !== -1) {
        this.articleList.splice(index, 1)
      }
      if (action.name === '不感兴趣') {
        const res = await articleDislikeApi({ artId: artId })
        console.log(res)
        // 弹窗功能，用自己封装的
        MyNotify({ type: 'success', message: '感谢您的反馈' })

        // 接口无效，所以把下面的注释了，下面的是正常的思路，仅仅因为articleDislikeApi接口用不了注释了
        // this.articleList = []
        // this.nextTime = null
        // this.getARrticleList()
      } else {
        // 点的是二级页面，反馈面板那里的
        const res = await articleReportsApi({
          artId: artId,
          type: action.value
        })
        // 弹窗功能，用自己封装的
        MyNotify({ type: 'success', message: '感谢您的反馈' })
        console.log(res)
      }
    },
    xianshi () {
      this.show = true
    },
    guan (i) {
      console.log(i)
      this.show = i
    },
    // 子组件不在编辑状态点击已选标签的时候让页面跳转
    tiaozhuan (obj) {
      this.active = obj.id
      this.pindaoId(obj.id)
    }
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(this.$route.meta)
    from.meta.top = window.scrollY // 页面离开前，记录当前的位置
    next()
  },
  activated () {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // console.log(666)
    // console.log(from)
    // console.log(to)
    this.$nextTick(() => {
      if (this.$route.meta.isScroll) {
        window.scrollTo(0, this.$route.meta.top)
      }
    })
  }
}
</script>

<style scoped lang=less>
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding: 46px 0 46px 0;
}
/* 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.van-popup {
  width: 100%;
  height: 100%;
}
</style>
